import React, { useEffect, useState } from 'react'
import { View, Text ,Image} from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.less'

export default function Navbbar(props) {
  const [navHeight,setnavHeight] = useState('')
  const [typeclass,settypeclass] = useState('n1')
  const [top,setTop] = useState('')
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect (()=>{
    const app = Taro.getApp()
    setnavHeight(app.navHeight)
    setTop(app.top)
    switch(props.type){
      case 1:
        break
      case 2:
        settypeclass('n2')
        break
      case 3:
        settypeclass('n3')
        break
      case 4:
        settypeclass('n4')
        break
       case 5:
        settypeclass('n5')
        break
        default:
        settypeclass('n6')

    }
  })
  let handleBack = ()=>{
    Taro.navigateBack({
      delta:1
    })
  }
  let gotoSearch = ()=>{
    Taro.navigateTo({
      url:'../search/index'
    })
  }
  return (
    // n1首页,n2分类,n3大众,n4搜索,n5搜索,n6个人
    <View>
      <View style={{height:navHeight+'px',paddingTop:top/2+'px'}} className={typeclass+' nav'}>
      {typeclass=='n2'&&(<View className='fen_input' style={{top:top/2+10+'px'}} onClick={()=>gotoSearch()}>
        搜一搜~
        </View>)}
      {
        typeclass=='n3'&&(<View>
          <Image onClick={()=>handleBack()} src='https://tpc666666.oss-cn-shanghai.aliyuncs.com/fanhui.png' className='back_icon' style={{top:top+'px'}}></Image>
        <View className='fen_input'onClick={()=>gotoSearch()} style={{top:top+'px'}}>{props.name||'西餐'}</View>
        </View>
        )  
      }
      {
         typeclass=='n4'&&(<View>
          <Image onClick={()=>handleBack()} src='https://tpc666666.oss-cn-shanghai.aliyuncs.com/fanhui.png' className='back_icon' style={{top:top+10+'px'}}></Image>
        <View className='search_logo'></View>
        </View>
        )  
      }
      {
        typeclass=='n5'&&(<View>
        <View className='collect_logo'></View>
        </View>
        )  
      }{
        typeclass=='n6'&&(<View>
          <View className='mine_logo'></View>
          </View>)
      }
    </View>
  </View>
  )
}
